<template>
  <main class="home">
    <ThemeDarwer v-model="themeDarwerVisiable" />
    <el-space direction="vertical" fill style="width: 100%">
      <section>
        <!-- <el-affix position="bottom" :offset="20">
          <el-button @click="onToggleTheme">切换主题</el-button>
        </el-affix> -->
        <el-button
          title="Title"
          style="position: fixed; right: 20px; top: 20px; z-index: 999"
          type="primary"
          @click="onToggleTheme"
          >切换主题</el-button
        >
        <el-button type="danger" @click="sendMessage">提示信息</el-button>
        <el-popover
          placement="bottom"
          title="Title"
          :width="200"
          trigger="click"
          content="this is content, this is content, this is con"
        >
          <template #reference>
            <el-button type="success" class="m-2">弹出层</el-button>
          </template>
        </el-popover>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="Top Left prompts info"
          placement="top-start"
        >
          <el-button>气泡框</el-button>
        </el-tooltip>
        <el-button type="primary" @click="sendRequest">发送网络请求</el-button>
      </section>
      <el-segmented v-model="segmentedValue" :options="options" block />
      <el-progress
        :percentage="50"
        :text-inside="true"
        :stroke-width="20"
        striped
        striped-flow
        :duration="80"
      >
        <span>Content</span>
      </el-progress>
      <el-steps style="max-width: 600px" :active="1" align-center>
        <el-step title="Step 1" />
        <el-step title="Step 2" />
        <el-step title="Step 3" />
      </el-steps>
      <el-space>
        <el-tag type="primary">Tag 1</el-tag>
        <el-tag type="success">Tag 2</el-tag>
        <el-tag type="info">Tag 3</el-tag>
        <el-tag type="warning">Tag 4</el-tag>
        <el-tag type="danger">Tag 5</el-tag>

        <el-tag type="primary" effect="dark">Tag 1</el-tag>
        <el-tag type="success" effect="dark">Tag 2</el-tag>
        <el-tag type="info" effect="dark">Tag 3</el-tag>
        <el-tag type="warning" effect="dark">Tag 4</el-tag>
        <el-tag type="danger" effect="dark">Tag 5</el-tag>

        <el-tag type="primary" effect="plain">Tag 1</el-tag>
        <el-tag type="success" effect="plain">Tag 2</el-tag>
        <el-tag type="info" effect="plain">Tag 3</el-tag>
        <el-tag type="warning" effect="plain">Tag 4</el-tag>
        <el-tag type="danger" effect="plain">Tag 5</el-tag>
      </el-space>
      <el-space>
        <el-input
          v-model="input1"
          style="max-width: 600px"
          placeholder="Please input"
          class="input-with-select"
        >
          <template #prepend>
            <el-select v-model="inputType" placeholder="Select" style="width: 115px">
              <el-option label="Restaurant" value="1" />
              <el-option label="Order No." value="2" />
              <el-option label="Tel" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button>搜索</el-button>
          </template>
        </el-input>
        <el-mention
          v-model="mentionValue"
          type="textarea"
          :options="options"
          style="width: 320px"
          placeholder="Please input"
        />
      </el-space>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="Date" width="150" />
        <el-table-column label="Delivery Info">
          <el-table-column prop="name" label="Name" width="120" />
          <el-table-column label="Address Info">
            <el-table-column prop="state" label="State" width="120" />
            <el-table-column prop="city" label="City" width="120" />
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" width="120" />
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <el-card style="max-width: 582px">
        <el-descriptions title="User Info" border>
          <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
          <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
          <el-descriptions-item label="Remarks">
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Address">
            No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card>
        <el-switch v-model="showSkeletonImg" />
        <el-skeleton
          style="display: flex; gap: 8px"
          :loading="!showSkeletonImg"
          :animated="true"
          :count="3"
        >
          <template #template>
            <div style="flex: 1">
              <el-skeleton-item variant="image" style="height: 240px" />
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-items: space-between;
                    margin-top: 16px;
                    height: 16px;
                  "
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </div>
          </template>
          <template #default>
            <div style="display: flex; column-gap: 12px">
              <el-card
                v-for="item in imglists"
                :key="item.name"
                style="flex: 1"
                :body-style="{ padding: '0px', marginBottom: '1px' }"
              >
                <el-image
                  :src="item.imgUrl"
                  :previewSrcList="imglists.map((it) => it.imgUrl)"
                  fit="cover"
                  lazy
                  show-progress
                  class="image multi-content"
                  style="width: 100%; height: 240px"
                >
                </el-image>
                <div style="padding: 14px">
                  <span>{{ item.name }}</span>
                  <div class="bottom card-header">
                    <el-button text class="button">Operation button</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-space>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getList } from '@/api'
import ThemeDarwer from './components/ThemeDarwer.vue';

const themeDarwerVisiable = ref(false);

const showSkeletonImg = ref(false);
const segmentedValue = ref('Fuphoenixes');
const input1 = ref('');
const inputType = ref('');
const mentionValue = ref('');
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const size = ref('default');
const background = ref(false);
const disabled = ref(false);
const imglists = ref([
  {
    imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    name: 'Deer'
  },
  {
    imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    name: 'Horse'
  },
  {
    imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    name: 'Mountain Lion'
  }
]);
const options = ref([
  { label: 'Fuphoenixes', value: 'Fuphoenixes' },
  { label: 'kooriookami', value: 'kooriookami' },
  { label: 'Jeremy', value: 'Jeremy' },
  { label: 'btea', value: 'btea' }
]);
const tableData = [
  // {
  //   date: '2016-05-03',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-02',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-04',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-01',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-08',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-06',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // },
  // {
  //   date: '2016-05-07',
  //   name: 'Tom',
  //   state: 'California',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   zip: 'CA 90036'
  // }
];

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
const sendMessage = () => {
  ElMessage.success('Hello World!' + new Date().getTime());
};

const sendRequest = async () => {
  try {
    const res = await getList({ name: '王' });
    console.log('res', res);
    
  } catch (error) {
    
  }
};

const onToggleTheme = () => {
  themeDarwerVisiable.value = true;
};
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  overflow: auto;
  // background-color: var(--ycy-color);
}
</style>
